<template>
	<view class="sign-box">
		<u-navbar title="签到" bgColor="rgba(254, 126, 41, 0.00)" titleStyle="color: #fff;font-size: 32rpx;"
			leftIconSize="36rpx" leftIconColor="#fff" @leftClick="goBack">

		</u-navbar>

		<view class="sign-box-top">
			<view class="sign-box-title">
				<view>天天签到</view>
				<view>领爆点</view>
			</view>
			<view class="sign-box-img">
				<image :src="imageUrl('sign-img.png')" mode="widthFix" style="width: 400rpx;height: 400rpx;" />
			</view>
		</view>

		<!-- 签到七天 -->
		<view class="sign-seven-day">
			<!-- 顶部盒子 -->
			<view class="seven-day-top">
				<view>
					<!-- <text>已连续签到</text>
					<text style="color: #FF7803;font-size: 38rpx;">0</text>
					<text>天</text> -->
					已连续签到0天
				</view>
				<view @click="actShow = true">
					活动规则
					<uni-icons type="info" style="margin-left: 10rpx;"></uni-icons>
				</view>
			</view>
			<!-- 七天 -->
			<view class="seven-day">
				<view :class="{'seven-day-item': true, 'active': item.sign}" v-for="item in sevenData" :key="item.day">
					<!-- 第七天显示 -->
					<image :src="imageUrl('sign-big-boom.png')" mode="widthFix" class="add-big-image"
						v-show="item.day === 7" />

					<!-- 第几天 -->
					<view class="add-day">
						第{{item.day}}天
					</view>

					<!-- 爆点图片 -->
					<image :src="imageUrl('sign-boom.png')" mode="widthFix" class="add-image" v-show="item.day !== 7" />

					<!-- 签到所获得爆点 -->
					<view class="add-boom">
						+{{item.boom}}爆点
					</view>
				</view>
			</view>

			<!-- 立即签到 -->
			<view :class="todaySign?'now-sign already':'now-sign'" @click="openSuccess">
				{{todaySign?'已签到':'立即签到'}}
			</view>
		</view>

		<!-- 活动规则的弹出层 -->
		<u-popup :show="actShow" mode="center" round="16rpx" @close="actShow = false" @open="actShow = true">
			<view class="activity-popup">
				<view class="activity-popup-title">签到规则</view>
				<view>
					1、说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容
				</view>
				<view>
					1、说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容
				</view>
				<view>
					1、说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容
				</view>

				<view class="btn" @click="actShow = false">我知道了</view>
			</view>
		</u-popup>

		<!-- 签到成功的弹出层 -->
		<u-popup :show="successShow" mode="center" round="16rpx" @close="closeSuccess" @open="openSuccess">
			<view class="success-popup">
				<view class="success-title">
					签到成功
				</view>
				<view class="success-logo">
					<image :src="imageUrl('success-logo.png')" mode="widthFix" style="width: 240rpx;height: 240rpx;" />
				</view>
				<view class="burst-point">
					<text class="burst-point-left">爆点：</text>
					<text class="burst-point-right">+10</text>
				</view>
				<view class="already-days">
					已连续签到<text style="color: #FF7803;">2天</text>，连续签到赚更多
				</view>
				<view class="btn" @click="closeSuccess">我知道了</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 活动规则弹出
				actShow: false,
				// 签到成功弹出
				successShow: false,
				// 七天签到 爆点
				sevenData: [{
					day: 1,
					boom: 1,
					sign: true
				}, {
					day: 2,
					boom: 2,
					sign: true
				}, {
					day: 3,
					boom: 3,
					sign: false
				}, {
					day: 4,
					boom: 4,
					sign: false
				}, {
					day: 5,
					boom: 5,
					sign: false
				}, {
					day: 6,
					boom: 6,
					sign: false
				}, {
					day: 7,
					boom: 10,
					sign: false
				}],
				// 今天是否签到
				todaySign: false
			}
		},
		methods: {
			// 返回上一级路由
			goBack() {
				uni.navigateBack()
			},
			// 签到成功弹出层
			closeSuccess() {
				// 关闭签到成功弹出层
				this.successShow = false
			},
			openSuccess() {
				// 如果没有签到
				if (!this.todaySign) {
					// 打开签到成功弹出层
					this.successShow = true
					// 今天已签到
					this.todaySign = true
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.sign-box {
		position: relative;
		width: 100vw;
		height: 100vh;
		background-color: #ffcf94;

		// 签到顶部盒子
		.sign-box-top {
			height: 640rpx;
			background: linear-gradient(179deg, #FF822C 0%, #FF6A36 58%, #FE7013 81%, rgba(254, 126, 41, 0.00) 99%);

			// 签到标题
			.sign-box-title {
				position: absolute;
				top: 180rpx;
				left: 50rpx;
				width: 266rpx;
				height: 188rpx;
				font-size: 60rpx;
				font-weight: bold;
				font-style: italic;
				color: #fff;
			}

			// 签到图片
			.sign-box-img {
				position: absolute;
				top: 100rpx;
				right: 0;
			}
		}

		// 签到七天
		.sign-seven-day {
			position: absolute;
			top: 450rpx;
			left: 30rpx;
			width: 690rpx;
			padding: 0 30rpx;
			border-radius: 16rpx;
			background-color: #FEF4ED;
			box-sizing: border-box;

			.seven-day-top {
				display: flex;
				justify-content: space-between;
				font-size: 32rpx;
				line-height: 140rpx;

				// 右侧活动规则
				:nth-child(2) {
					font-size: 24rpx;
				}
			}

			.seven-day {
				display: flex;
				flex-wrap: wrap;
				text-align: center;
				font-size: 24rpx;

				.seven-day-item {
					width: 144rpx;
					height: 176rpx;
					margin: 0 18rpx 18rpx 0;
					border-radius: 8rpx;
					background: #fff;
					color: #666;

					.add-day {
						margin-top: 18rpx;
						color: #333;
						font-weight: 500;
					}

					.add-image {
						width: 72rpx;
						height: 72rpx;
					}

					// 已签到改变背景色
					&.active {
						background: #FF7803;
						color: #fff;

						.add-day {
							color: #fff;
						}
					}

					&:nth-child(4) {
						margin-right: 0;
					}

					// 第七天
					&:nth-child(7) {
						width: 306rpx;
						margin-right: 0;
						text-align: left;

						.add-day {
							margin-left: 16rpx;
						}

						.add-boom {
							margin-top: 16rpx;
							margin-left: 16rpx;
						}

						// 第七天图片
						.add-big-image {
							float: right;
							width: 136rpx;
							height: 136rpx;
							margin-top: 40rpx;
						}
					}
				}
			}

			// 立即签到 按钮
			.now-sign {
				width: 550rpx;
				margin: 60rpx auto 80rpx;
				border-radius: 44rpx;
				text-align: center;
				line-height: 88rpx;
				color: #fff;
				background-color: #FF7803;

				// 已签到 添加透明度
				&.already {
					opacity: .2;
				}
			}
		}
	}

	// 活动规则弹出层
	.activity-popup {
		width: 568rpx;
		padding: 0 30rpx;
		font-size: 26rpx;
		line-height: 40rpx;
		box-sizing: border-box;

		.activity-popup-title {
			text-align: center;
			line-height: 120rpx;
			font-size: 32rpx;
		}
	}

	// 签到成功的弹出层
	.success-popup {
		width: 568rpx;
		text-align: center;

		// 签到成功标题
		.success-title {
			padding-top: 48rpx;
			font-size: 40rpx;
			font-weight: 500;
			color: #333;
		}

		// 签到获得爆点
		.burst-point {
			padding: 16rpx 0;
			font-size: 36rpx;

			.burst-point-left {
				font-weight: 500;
				color: #333;
			}

			.burst-point-right {
				font-size: 48rpx;
				font-weight: bold;
				color: #FF7803;
			}
		}

		// 已连续签到
		.already-days {
			padding-bottom: 48rpx;
			font-size: 28rpx;
			font-weight: 500;
		}
	}

	// 我知道了 按钮
	.btn {
		width: 500rpx;
		margin: 16rpx auto;
		border-radius: 44rpx;
		text-align: center;
		line-height: 88rpx;
		background: #FF7803;
		font-size: 28rpx;
		color: #fff;
	}
</style>